<template>
    <div class='head'>
        <div class='head-left'>
            <div style='display:flex; align-items: center; justify-content: space-around; padding: 11px 0px; border-bottom: 1px solid #90939929;'>
                <div style="width: 120px;">
                    <span class="demonstration"><span style="color:red;">*</span>考试时间：</span>
                </div>
                <div style="width: 300px;">
                    <el-date-picker
                        v-model="this.testpaper.startTime"
                        type="datetime"
                        placeholder="开始时间"
                        :default-time="this.testpaper.defaultTime"
                    />
                </div>
            </div>
            <div style='display:flex; align-items: center; justify-content: space-around; padding: 11px 0px; border-bottom: 1px solid #90939929;'>
                <div style="width: 120px;">
                    <span class="demonstration"><span style="color:red;">*</span>考试时间(分钟) :</span>
                </div>
                <div style="width: 300px;">
                    <el-input-number v-model="Exam_time" :min="1" :max="1000"/>
                </div>
            </div>
            <div style='display:flex; align-items: center; justify-content: space-around; padding: 11px 0px; border-bottom: 1px solid #90939929;'>
                <div style="width: 120px;">
                    <span class="demonstration"><span style="color:red;">*</span>考试结束时间：</span>
                </div>
                <div style="width: 300px;">
                    <el-date-picker
                        v-model="this.testpaper.e_duration_date"
                        type="datetime"
                        placeholder="结束时间"
                        :default-time="this.testpaper.defaultTime"
                    />
                </div>
            </div>
            <div style='display:flex; align-items: center; justify-content: space-around; padding: 11px 0px; border-bottom: 1px solid #90939929;'>
                <div style="width: 120px;">
                    <p><span style="color:red;">*</span>试卷名称：</p>
                </div>
                <div style="width: 300px;">
                    <el-input v-model="this.testpaper.name" style="width: 240px" placeholder="请输入试卷名称" />
                </div>
            </div>



            <!-- <div style='display:flex; align-items: center; justify-content: space-around; padding: 11px 0px; border-bottom: 1px solid #90939929;'>
                <p>试卷分数：</p>
                <el-input v-model="this.testpaper.fraction" style="width: 240px" placeholder="请输入试卷分数" />
            </div> -->
            <div style='display:flex; align-items: center; justify-content: space-around; padding: 11px 0px; border-bottom: 1px solid #90939929;'>
                <div style="width: 120px;">
                    <p>是否打乱题目:</p>
                </div>
                <div style="width: 300px;">
                    <el-radio-group v-model="this.testpaper.radio1" class="ml-4"  style="width: 240px">
                        <el-radio value="0" size="large">否</el-radio>
                        <el-radio value="1" size="large">是</el-radio>
                    </el-radio-group>
                </div>
            </div>
            <div style='display:flex; align-items: center; justify-content: space-around; padding: 11px 0px; border-bottom: 1px solid #90939929;'>
                <div style="width: 120px;">
                    <p><span style="color:red;">*</span>选择培训期 :</p>
                </div>
                <div style="width: 300px;">
                    <el-cascader clearable v-model="this.testpaper.Select" :options="this.$store.state.Class_clopedia" />
                </div>
            </div>
            <!-- <div style='display:flex; align-items: center; justify-content: space-around; padding: 11px 0px; border-bottom: 1px solid #90939929;'>
                <div style="width: 120px;">
                    <p>选择单位</p>
                </div>
                <div style="width: 300px;">
                    <el-cascader @change="this.testpaper.user = ''" v-model="this.testpaper.Select" :options="this.$store.state.Class_clopedia" />
                </div>
            </div>
            <div style='display:flex; align-items: center; justify-content: space-around; padding: 11px 0px; border-bottom: 1px solid #90939929;'>
                <div style="width: 120px;">
                    <p>选择用户</p>
                </div>
                <div style="width: 300px;">
                    <el-select v-model="this.testpaper.user" multiple placeholder="选择用户" style="width: 210px" @change='userChange()'>
                        <el-option
                            v-for="item in userData"
                            :key="item.u_id"
                            :label="item.u_name"
                            :value="item.u_id"
                        />
                    </el-select>
                </div>
            </div> -->
            <div style='display:flex; align-items: center; justify-content: space-around; padding: 11px 0px; border-bottom: 1px solid #90939929;'>
                <div style="width: 120px;">
                    <p>选择历史试卷考试:</p>
                </div>
                <div style="width: 300px;">
                    <el-cascader v-model="historypaperData" :options="historypaper" @change="historClick()" />
                </div>
            </div>
            <div>
                <div style="width: 120px;">
                    <p style='display: flex; align-items: center; justify-content: center; padding: 20px 0px;'>试卷备注信息：</p>
                </div>
                <el-input
                    v-model="this.testpaper.Remarks"
                    style="width: 100%"
                    autosize
                    type="textarea"
                    placeholder="请输入信息"
                />
            </div>
            <div style='padding: 11px 0px; border-bottom: 1px solid #90939929; '>
                <p style="padding: 1% 12%; font-size: 19px; font-weight: bold;">题目配置：</p>


                <div style="display: flex;justify-content: space-between;align-items: center;">
                    <p style="display: flex; justify-content: flex-start; font-weight: 600;">题目类型</p>
                    <el-select
                        v-model="Type_question"
                        filterable
                        allow-create
                        default-first-option
                        :reserve-keyword="false"
                        value-key="kind_id"
                        placeholder="请选择试题类型"
                        style="width:80%;"
                    >
                        <el-option
                            v-for="item in TimeData"
                            :key="item.kind_id"
                            :label="item.kind_name"
                            :value="item"
                        />
                    </el-select>
                </div>
                <div style="display: flex;justify-content: space-between;align-items: center;">
                    <p style="display: flex; justify-content: flex-start; font-weight: 600;">单选题</p>
                    <el-input-number v-model="SingleChoice" :min="1" :max="1000"/>
                    <el-input v-model="testpaper.Select0" style="width: 240px" placeholder="请输入试卷分数" />
                </div>
                <div style="display: flex;justify-content: space-between; align-items: center;">
                    <p style="display: flex; justify-content: flex-start; font-weight: 600;">多选题</p>
                    <el-input-number v-model="MultipleChoice" :min="1" :max="1000"/>
                    <el-input v-model="testpaper.Select1" style="width: 240px" placeholder="请输入试卷分数" />
                </div>
                <div style="display: flex;justify-content: space-between; align-items: center;">
                    <p style="display: flex; justify-content: flex-start; font-weight: 600;">判断题</p>
                    <el-input-number v-model="TrueorFalse" :min="1" :max="1000"/>
                    <el-input v-model="testpaper.Select2" style="width: 240px" placeholder="请输入试卷分数" />
                </div>
                
                <div style="display: flex;justify-content: space-between; align-items: center; font-size:30px; font-weight: 700;">
                    总分数： {{ Number(testpaper.Select0)*SingleChoice+Number(testpaper.Select1)*MultipleChoice+Number(testpaper.Select2)*TrueorFalse }}
                </div>
            </div>
            <div style='display: flex; justify-content: center; margin-top: 50px;'>
                <el-button type="success" @click="replace()">更换试卷题</el-button>
                <el-button type="primary" @click="generate()">生成试卷</el-button>
                <!-- <el-button type="warning" @click="tableType = true">试题类型</el-button> -->
            </div>
        </div>
        <div class='head-right'>
            <div v-if='!this.$store.state.generate.subject.length == 0'>
                <el-table :data="this.$store.state.generate.subject" :border="parentBorder" style="width: 100%">
                    <el-table-column type="expand" >
                        <template #default="props">
                        <ul class='option'>
                            <li>A</li>
                            <li>B</li>
                            <li v-show="props.row.answers[2] == 'Cundefined'">C</li>
                            <li v-show="props.row.answers[3] == 'Dundefined'">D</li>
                        </ul>
                        <ul class='optionT'>
                            <li v-for='(item,index) in props.row.answers'>
                                <p v-if="DataShow(item)" style="display: flex; justify-content: center;">
                                    {{ item.a_item }}
                                </p>
                                <div style='display: flex; justify-content: center;'>
                                    <el-tag v-if="item.a_correct == 1" type="success">正确答案</el-tag>
                                </div>
                            </li>
                        </ul>
                        </template>
                    </el-table-column>
                    <el-table-column label="题型" width="80">
                        <template #default="props">
                            <p v-if="props.row.q_type == '2'"> 判断题</p>
                            <p v-if="props.row.q_type == '1'"> 多选题</p>
                            <p v-if="props.row.q_type == '0'"> 单选题</p>
                        </template>
                    </el-table-column>
                    <el-table-column label="题干" prop="q_title" />
                    <el-table-column label="时间"  width="200" prop="create_time" />
                </el-table>
            </div>
            <el-empty v-else description="暂无数据" />
        </div>

        <!-- <el-drawer
            v-model="tableType"
            title="试题类型管理"
            direction="rtl"
            size="30%">
            <el-table :data="$store.state.gridData">
                <el-table-column property="kind_name" label="类型名称" />
                <el-table-column fixed="right" label="操作" >
                    <template #default="scope">
                        <el-button type="primary" size="small" @click="confirm(scope.row)">确认</el-button>
                        <el-button type="danger" size="small" @click="dele(scope.row)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </el-drawer> -->
    </div>
</template>
<script>
import { ElMessage,ElLoading } from 'element-plus'
export default {
   components: {},
    data() {
        return {
            testpaper:{
                name:"",            // 试卷名称
                startTime:"",       // 开始试卷时间
                fraction:"",        // 试卷分数
                Remarks:"",         // 试卷备注信息
                defaultTime: new Date(2000, 1, 1, 12, 0, 0),  // 试卷时间初始化
                radio1:'0',         // 是否打乱顺序
                Select:'',
                Select0:'',
                Select1:'',
                Select2:'',
                e_duration_date:'',
                user:'',
            },
            Exam_time:1,          // 考试时间
            SingleChoice:'2',      // 单选题
            TrueorFalse:"2",       // 判断题
            MultipleChoice:"2",    // 多选题
            historypaper:[],
            historypaperData:'',
            tableType: true,
            userData:[],
            TimeData:[],
            Type_question:1,
            TimeJis:""
        };
    },
    //监听属性 类似于data概念
    computed: {},
    //监控data中的数据变化
    watch: {},
    //生命周期 - 创建完成（可以访问当前this实例）
    created() {
        this.$store.dispatch('questionsType')
        this.$store.dispatch('Classinformation')
        this.get('/exam/history').then(res=>{
            if(res.data.length!= 0){
                res.data.forEach((item)=>{
                    this.historypaper.push({
                        'value': item.e_id,
                        'label': item.e_name,
                    })
                })
            }
        })
        this.get('/student/getAll').then(res=>{
            if(res.code == 200){
                this.userData = res.data
            }
        })
        this.get('/kind/').then(res=>{
            if(res.code == 200){
                this.TimeData = res.data
                this.Type_question = res.data[0]
                this.replace()
            }
        })
    },
    //方法集合
    methods: {
        userChange() {
            this.testpaper.Select = ''
        },
        // confirm(value) {
        //     this.TypeData = value.kind_id
        // },
        dele(val) {
            this.post('/kind/delete?id='+val.kind_id).then(res=>{
                if(res.code == 200){
                    this.$message({
                        message: '删除成功!',
                        type: 'success',
                    })
                    this.$store.state.gridData = this.$store.state.gridData.filter((item)=>{
                        return item.kind_id !== val.kind_id
                    })
                }else{
                    this.$message({
                        message: '删除失败',
                        type: 'error',
                    })
                }
            })
        },
        historClick() {
            this.get('/exam/history/detail?e_id='+this.historypaperData).then(res=>{
                this.$store.state.generate.subject = res.data
            })
        },
        replace(){
            let TimuData = []
            if(this.TrueorFalse == null){
                this.TrueorFalse = 0
            }
            if(this.MultipleChoice == null){
                this.MultipleChoice = 0
            }
            if(this.SingleChoice == null){
                this.SingleChoice = 0
            }
            console.log(this.MultipleChoice)
            TimuData.push(this.SingleChoice,this.MultipleChoice,this.TrueorFalse)
            let choice = {
                'size': TimuData.toString(),
                'type': '0,1,2',
                'kind_id': this.Type_question.kind_id || ''
            }
            this.$store.dispatch('compound_paper',choice)
        },
        DataShow(value){
            if(value.a_item == 'Dundefined' || value.a_item == 'Cundefined'){
                return false
            }else{
                return true
            }
        },
        generate(){
            // this.generatepaper()
            if(this.TimeJis != ''){
                clearTimeout(this.TimeJis);
                this.TimeJis = ''
            }else{
                this.TimeJis = setTimeout(() =>{
                    this.generatepaper()
                    this.TimeJis = ''
                },500)
            }
        },
        generatepaper(){
            let A = []
            this.$store.state.generate.subject.forEach((item,index) =>{
                A.push(item.q_id)
            })
            if(this.testpaper.Select == '' || this.testpaper.Select == null){
                this.$message({
                    message: '请选择培训期',
                    type: 'error',
                })
                return
            }
            if(this.Exam_time == 1){
                this.$message({
                    message: '请设置考试时间',
                    type: 'error',
                })
                return
            }
            if(this.testpaper.Select0 == ''){
                this.$message({
                    message: '请输入分数',
                    type: 'error',
                })
                return
            }
            if(this.testpaper.Select1 == ''){
                this.$message({
                    message: '请输入分数',
                    type: 'error',
                })
                return
            }
            if(this.testpaper.Select2 == ''){
                this.$message({
                    message: '请输入分数',
                    type: 'error',
                })
                return
            }
            if(this.testpaper.startTime == ''){
                this.$message({
                    message: '请选择开始时间',
                    type: 'error',
                })
                return
            }
            if(this.testpaper.e_duration_date == ''){
                this.$message({
                    message: '请选择结束时间',
                    type: 'error',
                })
                return
            }
            if(this.testpaper.name == ''){
                this.$message({
                    message: '请输入试卷名称',
                    type: 'error',
                })
                return
            }
            let NumberData = [Number(this.testpaper.Select0), Number(this.testpaper.Select1),Number(this.testpaper.Select2)]
            let NumberSize = [this.SingleChoice,this.MultipleChoice,this.TrueorFalse]
            let param = {
                e_name:this.testpaper.name,
                e_duration: this.timestamp(this.testpaper.startTime),
                e_score: this.testpaper.fraction,
                create_time: '',
                e_order: this.testpaper.radio1,
                q_ids: A,
                c_id:this.testpaper.Select[0],
                // office_id: this.testpaper.Select[0],
                q_scores: NumberData,
                q_type_num: NumberSize,
                e_start_date:this.timestamp(this.testpaper.startTime),
                e_duration_date: this.timestamp(this.testpaper.e_duration_date) ,
                time:this.Exam_time,
                // user_ids: this.testpaper.user
            }
            this.post('exam/save',param).then(res=>{
                if(res.code == 200){
                    ElMessage({
                        message: '添加成功!',
                        type: 'success',
                    })
                    // this.$router.push('/Startthe_exam')
                }else{
                    ElMessage({
                        message: res.data,
                        type: 'error',
                    })
                }
            })
        }
    },
    
    //生命周期 - 挂载完成（可以访问DOM元素）
    mounted() {
    },
    //生命周期 - 创建之前 
    beforeCreate() {},
    //生命周期 - 挂载之前
    beforeMount() {},
    // 生命周期 - 更新之前 
    beforeUpdate() {},
    //生命周期 - 更新之后
    updated() {},
    //生命周期 - 销毁之前
    beforeDestroy() {},
    //生命周期 - 销毁完成
    destroyed() {},
    //如果页面有keep-alive缓存功能，这个函数会触发
    activated() {},
}
</script>
<style  scoped>
.option li{
    width: 137px;
    height: 28px; 
    border: 1px solid var(--el-border-color);
    display: flex;
    align-items: center;
    justify-content: center;
}
.optionT li{
    width: 137px;
    border: 1px solid var(--el-border-color);
    /* display: flex;
    align-items: center;
    justify-content: center; */
    padding: 14px;
    word-wrap: break-word; 
}
.optionT{
    display: flex; 
    justify-content: space-around;
}
.option{
    display: flex; 
    justify-content: space-around;
}
.head-right{
    width:48%;
    height:100%;
    box-shadow: 4px 5px 63px -24px rgba(0, 0, 0, 0.5);
    overflow: auto;
}
.head-right::-webkit-scrollbar {
    width: 0;
}
.head-left{
    width:48%;
    height:100%;
    padding: 20px 20px;
    box-shadow: 4px 5px 63px -24px rgba(0, 0, 0, 0.5);
}
.head{
    width:100%;
    height:100%;
    display:flex;
    justify-content: space-between;
}
</style>